<script setup lang="ts">
import { ref } from 'vue'

// 当前孕周数据
const currentWeek = ref(24)
const currentDate = ref('2023年7月20日')
const estimatedDate = ref('2023年11月5日')
const fetalWeek = ref(22)

// 进度数据
const progress = ref(60) // 百分比

// 周选择器数据
const weekItems = ref([
    { week: 4, active: false },
    { week: 8, active: false },
    { week: 12, active: false },
    { week: 16, active: false },
    { week: 20, active: false },
    { week: 24, active: true },
    { week: 28, active: false },
    { week: 32, active: false },
    { week: 36, active: false },
    { week: 40, active: false }
])

// 选项卡数据
const tabs = ref([
    { name: '胎儿发育', active: true },
    { name: '妈妈变化', active: false },
    { name: '健康建议', active: false }
])

// 胎儿发育数据
const fetalMilestones = ref([
    {
        title: '大脑发育',
        description: '大脑迅速发育，脑细胞连接增加，开始形成记忆和感知，对外界刺激有反应。',
        icon: 'brain',
        bgColor: '#e6f7ff',
        iconColor: '#1890ff'
    },
    {
        title: '肺部发育',
        description: '肺部继续发育，肺泡开始形成，虽然还不能独立呼吸，但已在为出生后的呼吸做准备。',
        icon: 'lungs',
        bgColor: '#fff0f5',
        iconColor: '#ff69b4'
    },
    {
        title: '感官发育',
        description: '眼睛开始对光有反应，耳朵可以听到外界声音，味蕾开始形成，触觉更加敏感。',
        icon: 'eye',
        bgColor: '#f0fff0',
        iconColor: '#32cd32'
    },
    {
        title: '心脏发育',
        description: '心脏已完全形成四个心腔，血流循环正常，心率约为每分钟140-150次。',
        icon: 'heartbeat',
        bgColor: '#f5f5dc',
        iconColor: '#8b4513'
    }
])

// 妈妈变化数据
const motherChanges = ref([
    {
        title: '身体变化',
        description: '孕肚明显变大，子宫顶部已达肚脐上方约4厘米，可能出现水肿或背痛，常感到胎动。',
        icon: 'baby-carriage',
        bgColor: '#fff0f3',
        iconColor: '#ff9fb5'
    },
    {
        title: '情绪变化',
        description:
            '情绪相对稳定，开始为宝宝的到来做准备，但可能有些忧虑或者兴奋，注意保持心情愉快。',
        icon: 'heart',
        bgColor: '#fff0f3',
        iconColor: '#ff9fb5'
    },
    {
        title: '常见不适',
        description: '腰背痛、脚踝水肿、腿部抽筋、失眠、胃灼热、便秘可能会出现，需要格外关注。',
        icon: 'exclamation-circle',
        bgColor: '#fff0f3',
        iconColor: '#ff9fb5'
    }
])

// 健康建议数据
const healthTips = ref([
    {
        title: '饮食建议',
        description:
            '增加铁质和钙质摄入，确保充足的蛋白质，富含叶酸的食物仍然重要，适量补充DHA有益胎儿大脑发育。',
        icon: 'utensils',
        bgColor: '#e8f5e9',
        textColor: '#2e7d32',
        iconColor: '#4caf50'
    },
    {
        title: '运动建议',
        description:
            '适量散步，可尝试孕妇瑜伽，避免剧烈运动和承重训练，注意保持正确姿势，预防腰背痛。',
        icon: 'walking',
        bgColor: '#e3f2fd',
        textColor: '#1565c0',
        iconColor: '#2196f3'
    },
    {
        title: '注意事项',
        description:
            '定期产检，避免久站久坐，若出现不规则宫缩、异常阴道出血或水肿加重，请立即就医。睡觉时尽量采取左侧卧位。',
        icon: 'exclamation-triangle',
        bgColor: '#fff8e1',
        textColor: '#f57f17',
        iconColor: '#ffc107'
    }
])

// 当前选项卡内容
const activeTabIndex = ref(0)

// 切换选项卡
const switchTab = (index: number) => {
    activeTabIndex.value = index
    tabs.value.forEach((tab, i) => {
        tab.active = i === index
    })
}

// 切换周数
const selectWeek = (index: number) => {
    weekItems.value.forEach((item, i) => {
        item.active = i === index
    })
    currentWeek.value = weekItems.value[index].week

    // 在实际应用中，这里应该根据选择的周数更新其他数据
}

// 返回上一页
const goBack = () => {
    uni.navigateBack()
}

// 分享功能
const sharePage = () => {
    uni.showToast({
        title: '分享功能',
        icon: 'none'
    })
}
</script>

<template>
    <view class="fetal-growth">
        <!-- 页面头部 -->
        <view class="header">
            <view class="header-left">
                <text class="back-icon" @click="goBack">
                    <text class="iconfont icon-arrow-left"></text>
                </text>
                <text class="page-title">胎儿成长</text>
            </view>
            <view class="header-right">
                <text class="share-icon" @click="sharePage">
                    <text class="iconfont icon-share"></text>
                </text>
            </view>
        </view>

        <!-- 主内容区 -->
        <view class="main-content">
            <!-- 当前孕周信息 -->
            <view class="card">
                <view class="week-info items-center">
                    <view class="week-info-left">
                        <text class="current-week">第{{ currentWeek }}周</text>
                        <text class="fetal-week">胎儿第{{ fetalWeek }}周</text>
                    </view>
                    <view class="week-info-right">
                        <view class="current-date">{{ currentDate }}</view>
                        <view class="estimated-date">预产期：{{ estimatedDate }}</view>
                    </view>
                </view>

                <!-- 孕期进度 -->
                <view class="progress-section">
                    <view class="progress-header">
                        <text class="progress-title">孕期进度</text>
                        <text class="progress-value">{{ currentWeek }}/40周</text>
                    </view>
                    <view class="progress-container">
                        <view class="progress-bar" :style="{ width: progress + '%' }"></view>
                    </view>
                    <view class="progress-labels">
                        <text class="progress-label">0周</text>
                        <text class="progress-label">20周</text>
                        <text class="progress-label">40周</text>
                    </view>
                </view>

                <!-- 三个阶段 -->
                <view class="stage-section">
                    <view class="stage-item">
                        <text class="stage-name">第一孕期</text>
                        <text class="stage-status stage-completed">已完成</text>
                    </view>
                    <view class="stage-divider"></view>
                    <view class="stage-item">
                        <text class="stage-name">第二孕期</text>
                        <text class="stage-status stage-current">进行中</text>
                    </view>
                    <view class="stage-divider"></view>
                    <view class="stage-item">
                        <text class="stage-name">第三孕期</text>
                        <text class="stage-status stage-future">未开始</text>
                    </view>
                </view>
            </view>

            <!-- 胎儿大小 -->
            <view class="card">
                <view class="card-title">
                    <text class="iconfont icon-baby"></text>
                    <text>胎儿发育状态</text>
                </view>

                <view class="fruit-comparison">
                    <view class="fruit-image">
                        <text>🍆</text>
                    </view>
                    <view class="fruit-info">
                        <text class="fruit-name">茄子大小</text>
                        <view class="fruit-details">
                            <view class="detail-item">
                                <text class="detail-label">身长</text>
                                <text class="detail-value">30厘米</text>
                            </view>
                            <view class="detail-item">
                                <text class="detail-label">体重</text>
                                <text class="detail-value">600克</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 胎儿发育里程碑 -->
                <view class="milestone-highlight">
                    <text class="milestone-highlight-title">本周发育里程碑</text>
                    <text class="milestone-highlight-content">
                        宝宝的皮肤开始变得不那么透明，肺部正在准备呼吸，胎动更加明显，可以听到妈妈的声音了。
                    </text>
                </view>
            </view>

            <!-- 孕周选择 -->
            <view class="card">
                <view class="card-title">
                    <text class="iconfont icon-calendar"></text>
                    <text>各周发育概况</text>
                </view>

                <!-- 孕周选择器 -->
                <scroll-view class="week-selector" scroll-x show-scrollbar="false">
                    <view
                        v-for="(item, index) in weekItems"
                        :key="index"
                        :class="['week-item', { active: item.active }]"
                        @tap="selectWeek(index)"
                    >
                        <text class="week-number">{{ item.week }}</text>
                        <text class="week-label">周</text>
                    </view>
                </scroll-view>

                <!-- 选项卡 -->
                <view class="tabs">
                    <view
                        v-for="(tab, index) in tabs"
                        :key="index"
                        :class="['tab', { active: tab.active }]"
                        @tap="switchTab(index)"
                    >
                        {{ tab.name }}
                    </view>
                </view>

                <!-- 选项卡内容 -->
                <view v-if="activeTabIndex === 0">
                    <view
                        v-for="(milestone, index) in fetalMilestones"
                        :key="index"
                        class="milestone-item"
                    >
                        <view
                            class="milestone-icon"
                            :style="{
                                backgroundColor: milestone.bgColor,
                                color: milestone.iconColor
                            }"
                        >
                            <text class="iconfont" :class="'icon-' + milestone.icon"></text>
                        </view>
                        <view class="milestone-content">
                            <text class="milestone-title">{{ milestone.title }}</text>
                            <text class="milestone-description">{{ milestone.description }}</text>
                        </view>
                    </view>
                </view>

                <view v-if="activeTabIndex === 1">
                    <view
                        v-for="(change, index) in motherChanges"
                        :key="index"
                        class="milestone-item"
                    >
                        <view
                            class="milestone-icon"
                            :style="{ backgroundColor: change.bgColor, color: change.iconColor }"
                        >
                            <text class="iconfont" :class="'icon-' + change.icon"></text>
                        </view>
                        <view class="milestone-content">
                            <text class="milestone-title">{{ change.title }}</text>
                            <text class="milestone-description">{{ change.description }}</text>
                        </view>
                    </view>
                </view>

                <view v-if="activeTabIndex === 2">
                    <view
                        v-for="(tip, index) in healthTips"
                        :key="index"
                        class="health-tip-item"
                        :style="{ backgroundColor: tip.bgColor }"
                    >
                        <view class="health-tip-icon" :style="{ color: tip.iconColor }">
                            <text class="iconfont" :class="'icon-' + tip.icon"></text>
                        </view>
                        <view class="health-tip-content">
                            <text class="health-tip-title" :style="{ color: tip.textColor }">{{
                                tip.title
                            }}</text>
                            <text
                                class="health-tip-description"
                                :style="{ color: tip.textColor }"
                                >{{ tip.description }}</text
                            >
                        </view>
                    </view>
                </view>
            </view>

            <!-- 妈妈变化卡片 -->
            <view class="card">
                <view class="card-title">
                    <text class="iconfont icon-female"></text>
                    <text>准妈妈变化</text>
                </view>

                <view v-for="(change, index) in motherChanges" :key="index" class="milestone-item">
                    <view
                        class="milestone-icon"
                        :style="{ backgroundColor: change.bgColor, color: change.iconColor }"
                    >
                        <text class="iconfont" :class="'icon-' + change.icon"></text>
                    </view>
                    <view class="milestone-content">
                        <text class="milestone-title">{{ change.title }}</text>
                        <text class="milestone-description">{{ change.description }}</text>
                    </view>
                </view>
            </view>

            <!-- 健康建议卡片 -->
            <view class="card margin-bottom">
                <view class="card-title">
                    <text class="iconfont icon-notes-medical"></text>
                    <text>健康建议</text>
                </view>

                <view
                    v-for="(tip, index) in healthTips"
                    :key="index"
                    class="health-tip-item"
                    :style="{ backgroundColor: tip.bgColor }"
                >
                    <view class="health-tip-icon" :style="{ color: tip.iconColor }">
                        <text class="iconfont" :class="'icon-' + tip.icon"></text>
                    </view>
                    <view class="health-tip-content">
                        <text class="health-tip-title" :style="{ color: tip.textColor }">{{
                            tip.title
                        }}</text>
                        <text class="health-tip-description" :style="{ color: tip.textColor }">{{
                            tip.description
                        }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.fetal-growth {
    background-color: #ffffff;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    background-color: #ffffff;
    padding: 24rpx 32rpx 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #f0f0f0;
}

.header-left {
    display: flex;
    align-items: center;
}

.back-icon {
    margin-right: 16rpx;
    font-size: 36rpx;
}

.page-title {
    font-size: 36rpx;
    font-weight: 500;
}

.share-icon {
    font-size: 36rpx;
    color: #333;
}

.main-content {
    flex: 1;
    padding: 32rpx;
    background-color: #f9f9f9;
    overflow-y: auto;
}

.card {
    background-color: #ffffff;
    border-radius: 24rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 32rpx;
}

.card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
}

.card-title .iconfont {
    margin-right: 16rpx;
    color: #ff9fb5;
}

.week-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.week-info-left {
    display: flex;
    flex-direction: column;
}

.current-week {
    font-size: 42rpx;
    font-weight: 700;
}

.fetal-week {
    font-size: 28rpx;
    color: #999;
    margin-top: 4rpx;
}

.week-info-right {
    text-align: right;
}

.current-date {
    font-size: 28rpx;
    font-weight: 500;
}

.estimated-date {
    font-size: 24rpx;
    color: #999;
    margin-top: 4rpx;
}

.progress-section {
    margin-top: 32rpx;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8rpx;
}

.progress-title {
    font-size: 24rpx;
    color: #999;
}

.progress-value {
    font-size: 24rpx;
    font-weight: 500;
}

.progress-container {
    height: 12rpx;
    background-color: #f0f0f0;
    border-radius: 6rpx;
    margin: 16rpx 0;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #ff9fb5;
    border-radius: 6rpx;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #999;
    margin-top: 8rpx;
}

.stage-section {
    display: flex;
    margin-top: 32rpx;
}

.stage-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16rpx;
}

.stage-divider {
    width: 2rpx;
    background-color: #f0f0f0;
}

.stage-name {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 8rpx;
}

.stage-status {
    font-size: 24rpx;
    font-weight: 500;
}

.stage-completed {
    color: #2196f3;
}

.stage-current {
    color: #ff9fb5;
}

.stage-future {
    color: #999;
}

.fruit-comparison {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;
}

.fruit-image {
    width: 160rpx;
    height: 160rpx;
    background-color: #fff0f3;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 32rpx;
    font-size: 72rpx;
}

.fruit-info {
    flex: 1;
}

.fruit-name {
    font-size: 36rpx;
    font-weight: 500;
    margin-bottom: 8rpx;
}

.fruit-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24rpx;
}

.detail-item {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-size: 24rpx;
    color: #999;
    margin: 9rpx 0;
}

.detail-value {
    font-size: 32rpx;
    font-weight: 500;
}

.milestone-highlight {
    background-color: #e3f2fd;
    padding: 24rpx;
    border-radius: 16rpx;
}

.milestone-highlight-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #1565c0;
    margin-bottom: 16rpx;
}

.milestone-highlight-content {
    font-size: 26rpx;
    color: #1976d2;
    line-height: 1.5;
}

.week-selector {
    height: 120rpx;
    white-space: nowrap;
    margin-bottom: 32rpx;
}

.week-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    height: 100rpx;
    margin-right: 16rpx;
    border-radius: 16rpx;
    background-color: #f5f5f5;
}

.week-item.active {
    background-color: #ff9fb5;
    color: white;
}

.week-number {
    font-size: 32rpx;
    font-weight: 600;
}

.week-label {
    font-size: 20rpx;
}

.tabs {
    display: flex;
    background-color: #f5f5f5;
    border-radius: 16rpx;
    padding: 8rpx;
    margin-bottom: 32rpx;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 16rpx 0;
    font-size: 28rpx;
    border-radius: 12rpx;
    transition: all 0.2s ease;
}

.tab.active {
    background-color: #fff;
    color: #ff9fb5;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.milestone-item {
    display: flex;
    padding: 24rpx 0;
    border-bottom: 2rpx solid #f0f0f0;
}

.milestone-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.milestone-icon {
    width: 64rpx;
    height: 64rpx;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
    flex-shrink: 0;
    font-size: 28rpx;
}

.milestone-content {
    flex: 1;
}

.milestone-title {
    font-size: 28rpx;
    font-weight: 500;
    margin-bottom: 8rpx;
}

.milestone-description {
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
}

.health-tip-item {
    padding: 24rpx;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    display: flex;
    align-items: flex-start;
}

.health-tip-item:last-child {
    margin-bottom: 0;
}

.health-tip-icon {
    margin-right: 16rpx;
    margin-top: 4rpx;
    font-size: 28rpx;
}

.health-tip-content {
    flex: 1;
}

.health-tip-title {
    font-size: 28rpx;
    font-weight: 500;
    margin-bottom: 8rpx;
}

.health-tip-description {
    font-size: 26rpx;
    line-height: 1.5;
}

.margin-bottom {
    margin-bottom: 48rpx;
}
</style>
